<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动弹窗动画生成器</title>
    <meta property="og:title" content="自动弹窗动画生成器">
    <meta property="og:description" content="有趣的弹窗动画效果，支持触摸操作">
    <meta property="og:image" content="https://example.com/thumbnail.jpg">
    <style>
        * {
           margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow: hidden;
            -webkit-overflow-scrolling: touch; /* 优化iOS滚动 */
        }

        .popup {
            position: fixed;
            width: 200px;
            height: 100px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 15px;
            cursor: move;
            user-select: none;
            border: 2px solid rgba(255, 255, 255, 0.3);
            z-index: 1000;
            opacity: 0;
            -webkit-user-select: none; /* 兼容iOS */
            -webkit-touch-callout: none; /* 禁用长按菜单 */
        }

        .popup-content {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            line-height: 1.4;
            word-break: break-word;
        }

        .controls {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 2000;
            text-align: center;
            min-width: 300px;
            /* 默认隐藏控制面板 */
            display: none;
        }

        .controls.show {
            display: block;
        }

        .controls h2 {
            margin-bottom: 10px;
            color: #333;
        }

        .control-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.05);
        }

        button:active {
            transform: scale(0.95);
        }

        .stats {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }

        .welcome {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.8);
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            color: #333;
            z-index: 2000;
            text-align: center;
            animation: fadeInOut 3s ease-in-out forwards;
        }

        .toggle-controls {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            z-index: 2001;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 动画关键帧 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
            20% { opacity: 1; transform: translateX(-50%) translateY(0); }
            80% { opacity: 1; transform: translateX(-50%) translateY(0); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        }

        @keyframes scaleIn {
            from { 
                opacity: 0;
                transform: scale(0.1);
            }
            to { 
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateX(-100px);
            }
            to { 
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes bounceIn {
            0% { 
                opacity: 0;
                transform: translateY(-50px) scale(0.3);
            }
            50% { 
                opacity: 1;
                transform: translateY(0) scale(1.1);
            }
            70% { 
                transform: translateY(-10px) scale(1.05);
            }
            100% { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.5); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .popup {
                width: 180px;
                height: 90px;
                font-size: 13px;
            }
            
            .controls {
                min-width: 90%;
                padding: 10px;
            }
            
            .control-buttons {
                flex-direction: column;
            }
            
            button {
                padding: 10px;
            }
            
            .welcome {
                width: 90%;
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .popup {
                width: 160px;
                height: 80px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <!-- 控制面板切换按钮 -->
    <button class="toggle-controls" onclick="toggleControls()">⚙️</button>

    <!-- 控制面板 -->
    <div class="controls" id="controlsPanel">
        <h2>🎯 自动弹窗生成器</h2>
        <div class="control-buttons">
            <button onclick="stopGeneration()">暂停生成</button>
            <button onclick="resumeGeneration()">继续生成</button>
            <button onclick="clearAllPopups()">清空所有</button>
            <button onclick="changeSpeed('faster')">加速</button>
            <button onclick="changeSpeed('slower')">减速</button>
        </div>
        <div class="stats">
            已生成: <span id="popupCount">0</span> | 
            状态: <span id="status">生成中...</span> |
            速度: <span id="speed">中速</span>
        </div>
    </div>

    <div class="welcome" id="welcomeMessage">
        弹窗已开始自动生成！双击弹窗可关闭，拖动可移动位置<br>
        点击右上角⚙️按钮可显示控制面板
    </div>

    <script>

        (function() {
            // 检测是否在微信中打开
            const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
            
            if (isWeChat) {
                // 微信特定优化
                document.addEventListener('WeixinJSBridgeReady', function() {
                    // 微信JS桥接准备完成后可以执行特定操作
                });
                
                // 禁用微信浏览器下拉刷新
                document.body.addEventListener('touchmove', function(e) {
                    if (e.target === document.body) {
                        e.preventDefault();
                    }
                }, { passive: false });
            }
        })
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化弹窗管理器
            const popupManager = new PopupManager();
            
            // 页面加载后自动开始生成（延迟1秒）
            setTimeout(() => {
                popupManager.startGeneration();
            }, 1000);
            
            // 5秒后隐藏欢迎消息
            setTimeout(() => {
                const welcomeMessage = document.getElementById('welcomeMessage');
                if (welcomeMessage) {
                    welcomeMessage.style.display = 'none';
                }
            }, 5000);
            
            // 将popupManager设为全局变量，以便按钮函数访问
            window.popupManager = popupManager;
            
            // 添加键盘快捷键监听
            document.addEventListener('keydown', function(e) {
                // Ctrl+Shift+C 显示/隐藏控制面板
                if (e.ctrlKey && e.shiftKey && e.key === 'C') {
                    e.preventDefault();
                    toggleControls();
                }
            });
        });
        

        class PopupManager {
            constructor() {
                this.popups = new Set();
                this.popupCount = 0;
                this.isGenerating = false; // 初始状态为false
                this.generationTimer = null;
                this.generationSpeed = 800; // 默认0.8秒
                this.maxPopups = 100;
                
                // 消息列表
                this.messages = [
                    "今天过得怎么样？",
                    "每天都要元气饱满",
                    "记得休息一下！",
                    "保持期待",
                    "保持微笑",
                    "遇见你很幸运",
                    "期待我们的见面",
                    "梦想成真",
                    "保持好心情",
                    "今天过的开心吗",
                    "好好爱自己",
                    "金榜题目",
                    "记得吃水果",
                    "别熬夜",
                    "学会爱自己，才能更好地爱别人！",
                    "今天天气真好",
                    "保持好心情！",
                    "学习使我快乐",
                    "记得好好护肤",
                    "加油！",
                    "坚持就是胜利",
                    "每天进步一点点",
                    "梦想还是要有的",
                    "未来可期",
                    "相信自己"
                ];

                // 动画类型
                this.animationTypes = ['fadeIn', 'scaleIn', 'slideIn', 'bounceIn'];
                
                // 颜色列表
                this.colors = [
                    'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
                    'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
                    'linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%)',
                    'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)',
                    'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
                    'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
                ];
            }

            getRandomMessage() {
                return this.messages[Math.floor(Math.random() * this.messages.length)];
            }

            getRandomAnimation() {
                return this.animationTypes[Math.floor(Math.random() * this.animationTypes.length)];
            }

            getRandomColor() {
                return this.colors[Math.floor(Math.random() * this.colors.length)];
            }

            getRandomPosition() {
                const margin = 50;
                const popupWidth = window.innerWidth > 768 ? 200 : 160;
                const popupHeight = window.innerWidth > 768 ? 100 : 80;
                
                const x = margin + Math.random() * (window.innerWidth - popupWidth - margin * 2);
                const y = margin + Math.random() * (window.innerHeight - popupHeight - margin * 2);
                
                return { x, y };
            }

            createPopup() {
                if (this.popupCount >= this.maxPopups) {
                    this.stopGeneration();
                    this.updateStatus('已完成100个弹窗');
                    return;
                }

                const position = this.getRandomPosition();
                const message = this.getRandomMessage();
                const animation = this.getRandomAnimation();
                const color = this.getRandomColor();

                const popup = document.createElement('div');
                popup.className = 'popup';
                popup.style.left = position.x + 'px';
                popup.style.top = position.y + 'px';
                popup.style.background = color;
                
                // 设置动画
                popup.style.animation = `${animation} 0.6s ease-out forwards`;

                const content = document.createElement('div');
                content.className = 'popup-content';
                content.textContent = message;
                popup.appendChild(content);

                // 添加触摸/点击事件
                this.setupPopupEvents(popup);

                document.body.appendChild(popup);
                this.popups.add(popup);
                this.popupCount++;

                // 8秒后自动关闭
                setTimeout(() => {
                    this.removePopup(popup);
                }, 8000);

                this.updateDisplay();
            }

            setupPopupEvents(popup) {
                let isDragging = false;
                let startX, startY, initialX, initialY;

                // 鼠标/触摸按下事件
                const onPointerDown = (e) => {
                    isDragging = true;
                    if (e.type === 'touchstart') {
                        startX = e.touches[0].clientX;
                        startY = e.touches[0].clientY;
                    } else {
                        startX = e.clientX;
                        startY = e.clientY;
                    }
                    
                    initialX = parseInt(popup.style.left) || 0;
                    initialY = parseInt(popup.style.top) || 0;
                    
                    popup.style.zIndex = 2000;
                    popup.style.transition = 'none';
                    
                    e.preventDefault();
                };

                // 鼠标/触摸移动事件
                const onPointerMove = (e) => {
                    if (!isDragging) return;
                    
                    let currentX, currentY;
                    if (e.type === 'touchmove') {
                        currentX = e.touches[0].clientX;
                        currentY = e.touches[0].clientY;
                    } else {
                        currentX = e.clientX;
                        currentY = e.clientY;
                    }
                    
                    const dx = currentX - startX;
                    const dy = currentY - startY;
                    
                    popup.style.left = (initialX + dx) + 'px';
                    popup.style.top = (initialY + dy) + 'px';
                    
                    e.preventDefault();
                };

                // 鼠标/触摸释放事件
                const onPointerUp = (e) => {
                    if (!isDragging) return;
                    
                    isDragging = false;
                    popup.style.transition = 'all 0.3s ease';
                    
                    // 双击/双触关闭
                    if (e.detail === 2 || (e.type === 'touchend' && e.touches.length === 0)) {
                        this.removePopup(popup);
                    }
                    
                    e.preventDefault();
                };

                // 添加事件监听器
                popup.addEventListener('mousedown', onPointerDown);
                popup.addEventListener('touchstart', onPointerDown, { passive: false });
                
                document.addEventListener('mousemove', onPointerMove);
                document.addEventListener('touchmove', onPointerMove, { passive: false });
                
                document.addEventListener('mouseup', onPointerUp);
                document.addEventListener('touchend', onPointerUp);
            }

            removePopup(popup) {
                if (!this.popups.has(popup)) return;
                
                popup.style.animation = 'fadeOut 0.5s ease-out forwards';
                
                setTimeout(() => {
                    if (popup.parentNode) {
                        popup.parentNode.removeChild(popup);
                    }
                    this.popups.delete(popup);
                }, 500);
            }

            startGeneration() {
                if (this.isGenerating) return;
                
                this.isGenerating = true;
                this.updateStatus('生成中...');
                
                const generate = () => {
                    if (!this.isGenerating) return;
                    
                    this.createPopup();
                    
                    // 随机间隔（50-200毫秒）
                    const delay = Math.random() * 150 + 50;
                    this.generationTimer = setTimeout(generate, delay);
                };
                
                generate();
            }

            stopGeneration() {
                this.isGenerating = false;
                if (this.generationTimer) {
                    clearTimeout(this.generationTimer);
                }
                this.updateStatus('已暂停');
            }

            clearAllPopups() {
                this.stopGeneration();
                this.popups.forEach(popup => {
                    if (popup.parentNode) {
                        popup.parentNode.removeChild(popup);
                    }
                });
                this.popups.clear();
                this.popupCount = 0;
                this.updateDisplay();
            }

            changeSpeed(type) {
                if (type === 'faster') {
                    this.generationSpeed = Math.max(50, this.generationSpeed / 2);
                } else {
                    this.generationSpeed = Math.min(2000, this.generationSpeed * 2);
                }
                
                document.getElementById('speed').textContent = 
                    this.generationSpeed <= 100 ? '极快' :
                    this.generationSpeed <= 300 ? '快速' :
                    this.generationSpeed <= 700 ? '中速' : '慢速';
            }

            updateDisplay() {
                document.getElementById('popupCount').textContent = this.popupCount;
            }

            updateStatus(status) {
                document.getElementById('status').textContent = status;
            }
        }

        // 切换控制面板显示/隐藏
        function toggleControls() {
            const controlsPanel = document.getElementById('controlsPanel');
            controlsPanel.classList.toggle('show');
        }

        // 全局函数供按钮调用
        function startGeneration() {
            if (window.popupManager) window.popupManager.startGeneration();
        }
        
        function stopGeneration() {
            if (window.popupManager) window.popupManager.stopGeneration();
        }
        
        function resumeGeneration() {
            if (window.popupManager) window.popupManager.startGeneration();
        }

        function clearAllPopups() {
            if (window.popupManager) window.popupManager.clearAllPopups();
        }

        function changeSpeed(type) {
            if (window.popupManager) window.popupManager.changeSpeed(type);
        }

        // 防止页面滚动
        document.addEventListener('touchmove', (e) => {
            if (e.target.className !== 'popup') {
                e.preventDefault();
            }
        }, { passive: false });

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            // 可以添加响应式调整逻辑
        });
    </script>
</body>
</html>